/**
 * Created by fangshufeng on 2018/2/27.
 */

import  React from 'react'

import {Select, Modal, Button, Input} from 'antd';

import  {ErrorModalAutoDismiss, InfoModal} from './AlertManage';

const Option = Select.Option;

const envObj = {
    stb1: 'http://192.168.3.79:19000/',
    stb2: 'http://192.168.3.69:19000/',
    stb3: 'http://192.168.3.70:19000/',
    stb4: 'http://192.168.3.103:19000/',
    stb5: 'http://192.168.3.71:19000/',
    stb6: 'http://192.168.3.100:19000/',
    stb7: 'http://192.168.3.36:19000/',
    sit: 'https://m.sit.nonobank.com/feserver/',
    pre: 'https://m.pre.nonobank.com/feserver/',
    pro: 'https://m.nonobank.com/feserver/',
};


class AddEnv extends React.Component {

    constructor(props) {
        super(props);

        this.envValue = null;
        this.hostValue = null
    };

    envChange = (e) => {
        this.envValue = e.target.value
    };

    hostChang = (e) => {
        this.hostValue = e.target.value
    };

    inner_okAction = (env, host) => {

        let envRegex = /^[a-zA-Z]+/;
        if (!envRegex.test(env) || !env) {
            ErrorModalAutoDismiss('请输入正确环境名称');
            return;
        }

        let hostRegex = /[a-zA-Z]+:\/\//;
        if (!hostRegex.test(host)) {
            ErrorModalAutoDismiss('请输入正确的地址');
            return;
        }

        this.props.okAction(env, host)
    };

    render() {
        return <div>
            <Modal
                title="新增mock环境"
                visible={true}
                onOk={() => this.inner_okAction(this.envValue, this.hostValue)}
                onCancel={() => this.props.cancel_action()}
                closable={false}
            >
                <p>环境名称（纯英文）</p>
                <Input placeholder='输入环境名称例如 PRE'
                       style={{fontSize: 10}}
                       onChange={(e) => this.envChange(e)}
                />
                <p></p>

                <p >环境地址</p>
                <Input placeholder='输入环境地址例如 https://...'
                       style={{fontSize: 10}}
                       onChange={(e) => this.hostChang(e)}/>
                <p></p>
            </Modal>

        </div>
    }
}

export default  class EnvSelect extends React.Component {

    constructor(props) {
        super(props);
        this.currentEnv = null;
        this.currentHost = null;

        this.state = {
            visibleView: this.userSelectEnv(),
        }
    }

    subViews = () => {
        let envList = [];
        for (let i = 0; i < Object.keys(envObj).length; i++) {
            let temp_key = Object.keys(envObj)[i];
            envList.push(<Option value={temp_key} key={i}>{temp_key}</Option>)
        }
        return envList;

    };


    //用户的环境选择
    userSelectEnv = () => {
        let tempModal = InfoModal({
            title: <div style={{fontFamily: 'Microsoft YaHei'}}>请选择需要mock的环境</div>,
            content: (
                <div>
                    <Select
                        showSearch
                        style={{width: 150, fontSize: 10}}
                        placeholder="点击选择"
                        optionFilterProp="children"
                        onChange={(value) => {
                            this.currentEnv = value;
                            this.currentHost = envObj[value];

                        }}
                    >
                        {this.subViews()}
                    </Select>

                    <Button style={{marginLeft: 20, paddingLeft: 5, paddingRight: 0, fontSize: 12}}
                            onClick={() => this.setState({
                                visibleView: <AddEnv
                                    cancel_action={() => this.setState({visibleView: null})}
                                    okAction={(env, host) => {
                                        this.props.onOk(env, host);
                                        tempModal.destroy();
                                    }}
                                />
                            })}>没有需要的环境？</Button>
                </div>
            ),

            onOk: () => {
                if (this.currentEnv) {
                    this.props.onOk(this.currentEnv, this.currentHost)
                } else {
                    ErrorModalAutoDismiss('请先完成环境选择')
                }
            }
        });
    };

    render() {
        return <div>{this.state.visibleView}</div>;
    }
}